import { useState,useEffect ,useCallback} from 'react';
import { Col, Row } from 'antd';
import './index.css'; // 确保你有这个样式文件
import PropTypes from 'prop-types';
import Img1 from '../../assets/1.png'; 
import Img2 from '../../assets/2.png';
import { Footer } from 'antd/es/layout/layout';

const images = [
  Img1,
  Img2,
];

// 轮播组件
const Carousel = ({ images, width, height , autoplayInterval = 3000}) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const goToPrevious = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? images.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const goToNext = useCallback(() => {
    const isLastSlide = currentIndex === images.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  });

  // 自动播放
  useEffect(() => {
    const intervalId = setInterval(goToNext, autoplayInterval);

    // 清除定时器以避免内存泄漏
    return () => clearInterval(intervalId);
  }, [autoplayInterval, goToNext]);

  return (
    <div className="carousel-container" style={{ width, margin: 'auto' }}>
      <button onClick={goToPrevious}>Prev</button>
      <img src={images[currentIndex]} alt={`slide ${currentIndex}`} style={{ width, height }} />
      <button onClick={goToNext}>Next</button>
    </div>
  );
};

Carousel.propTypes = {
  images: PropTypes.arrayOf(PropTypes.string).isRequired,
  width: PropTypes.string.isRequired,
  height: PropTypes.string.isRequired,
  autoplayInterval: PropTypes.number,
};

// 分区组件
const Section = ({ title, content, mediaType, mediaSrc, videoSrc,link }) => (
  <div className="section">
    <h3 className='title'>
      {link ? <a href={link} target="_blank" rel="noopener noreferrer">{title}</a> : title}
    </h3>
    <Row gutter={24}> {/* 可以根据需要调整 gutter 值 */}
      <Col span={12} className="section-content">
        <p>{content}</p>
      </Col>
      <Col span={12} className="section-media">
        {mediaType === 'image' && <img src={mediaSrc} alt={`${title} 图片`} />}
        {mediaType === 'video' && (
          <video controls width="100%">
            <source src={videoSrc} type="video/mp4" />
            您的浏览器不支持 video 标签。
          </video>
        )}
      </Col>
    </Row>
  </div>
);

Section.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
  mediaType: PropTypes.oneOf(['image', 'video']).isRequired,
  mediaSrc: PropTypes.string,
  videoSrc: PropTypes.string,
  link: PropTypes.string, // 新增 link 属性
};

// 主页面组件
const MainPage = () => {
  return (
    <div className='bg'>
      <Carousel images={images} width="1012px" height="569px" autoplayInterval={3000}/>

      {/* 分区1 - 左右结构 */}
      <Section
        title="-单词学习-"
        content={<p>解锁语言的力量，通过系统化的单词学习，轻松掌握海量词汇，让表达更加精准流畅，开启无限沟通可能！</p>}
        mediaType="image"
        mediaSrc="path/to/image1.jpg"
        link="/#/word"
      />

      {/* 分区2 - 左右结构 */}
      <Section
        title="-对话练习-"
        content={<p>探索多本对话秘籍，涵盖丰富场景与章节，全面提升沟通技巧，助您在各种场合游刃有余，成为真正的对话高手！</p>}
        mediaType="image"
        mediaSrc="path/to/image2.jpg"
        link="/#/speech"
      />

      {/* 分区3 - 左右结构 */}
      <Section
        title="-阅读翻译-"
        content={<p>跨越语言障碍，畅享全球文学之美。通过精准的阅读翻译，深入理解多元文化，拓展视野，让每一段文字都变得生动而有意义。</p>}
        mediaType="image"
        mediaSrc="path/to/image3.jpg"
        link="/#/reading"
      />

      {/* 分区4 - 左右结构 */}
      <Section
        title="-进度记录-"
        content={<p>追踪每一步成长，见证每一次突破。进度记录板块助您清晰掌握学习进展，设定目标，持续激励，让进步触手可及！</p>}
        mediaType="video"
        videoSrc="path/to/video.mp4"
        link="/#/progress"
      />
      <Footer style={{ 
        marginTop: '20px', 
        textAlign: 'center', 
        backgroundColor: '#a1daeb', 
        padding: '20px 0', 
        color: '#ffffff' 
      }}>
        <p>© 2024 Reora</p>
        <p>Contact me: <a href="mailto:981706712@qq.com">981706712@qq.com</a></p>
      </Footer>
    </div>
  );
};

export default MainPage;